<!-- To refactor the various booleans in Column Options into an enum -->
<span *ngIf="options.hasRouterLink && key.linkEnabled">
    <a *ngIf="key.serviceType" [routerLink]="['/ga', 'research' , 'company' ,key.routerLink , key.serviceType]" class="text-link"
        title="{{key.name}}">
        {{ key.name }}
    </a>
    <a *ngIf="key.serviceType == null" [routerLink]="key.routerLink" title="{{key.name}}" class="text-link">
        {{ key.name }}
    </a>
    <div *ngIf="key.description">{{key.description}}</div>
</span>
<span *ngIf="options.hasRouterLink && !key.linkEnabled && !options.hasButton && !options.isMultiline" title="{{key.name}}">{{ key.name }}</span>
<span *ngIf="isDate(key)"> {{ key | date: 'dd MMM yyyy' }} </span>
<span *ngIf="options.columnButtons !== undefined">
    <i *ngIf="getClass(key) === 'available'" class="ti-check text-success"></i>
    <i *ngIf="getClass(key) === 'notAvailable'" class="ti-close"></i>
    <i *ngIf="getClass(key) === 'noData'" class="ti-na text-red"></i>

    <span *ngIf="!options.columnButtons && !options.isMultiline && !options.isEditable" title="{{key}}">{{ key }} </span>
</span>
<span *ngIf="options.isLabel && !options.hasMultipleEntries" title="{{key}}">{{ key }} </span>
<span *ngIf="options.isLabel && options.hasMultipleEntries">
    <span *ngFor="let label of key;let index = index">
        <span *ngIf="isString(label)" title="{{label}}">{{label}}</span>
        <span *ngIf="!isString(label)" title="{{label.name}}">
            <span *ngIf="label.indent" style="margin-left: 20px">
                {{label.name}}
            </span>
            <span *ngIf="label.bold" style="font-weight: 420">
                {{label.name}}
            </span>        
        </span>        
        <br>
    </span>
</span>
<span *ngIf="!options.columnButtons && options.isMultiline">
    {{ key.FirstLine }}
    <div>{{ key.SecondLine }}</div>
</span>
<span *ngIf="options.isEditable">
    <span *ngIf="!key.isEdit">{{ key.value }}</span>
    <i *ngIf="!key.isEdit" class="ti-pencil" (click)="key.isEdit=!key.isEdit"></i>
    <input *ngIf="key.isEdit" type="number" class="form-control my-1" [(ngModel)]="key.value">
    <div *ngIf="key.isEdit" class="mt-1">
        <a href="javascript:;;" class="text-link text-uppercase secondary-text" (click)="key.isEdit=!key.isEdit;">Cancel</a>
        <a href="javascript:;;" class="text-link text-uppercase secondary-text ml-3" (click)="onButtonClicked(key); key.isEdit=!key.isEdit;">Save</a>
    </div>
</span>

<div *ngIf="options.hasButton">
    <ng-container *ngFor="let button of key;">
        <button *ngIf="button.buttonType == 1" (click)="onButtonClicked(button.actionOptions)" class="btn btn-sm btn-transparent"
            [disabled]="!button.isEnabled"> {{ button.name }} </button>
        <br *ngIf="options.hasMultipleEntries">
        <ui-switch *ngIf="button.buttonType == 2" size="small" (change)="onButtonClicked(button.actionOptions);" [(ngModel)]="button.actionOptions.info.isChecked"
            [disabled]="!button.isEnabled"></ui-switch>
    </ng-container>
</div>